<div class="layui-card-header layui-card">
    <span class="layui-breadcrumb" lay-filter="breadcrumb">
        <a lay-href="">主页</a>
        <a>结算</a>
        <a><cite>银行账号列表</cite></a>
    </span>
</div>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-tab layui-tab-brief">
            <ul class="layui-tab-title">
                <li class="layui-this">银行账号列表</li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show" style="margin-bottom:1%;">
                    <div class="layui-row">
                        <div class="layui-form" style="float:right;">
                            <div class="layui-form-item" style="margin:0;">
                                <div class="layui-input-inline">
                                    <input type="text" name="id" id="id" placeholder="银行账号ID" autocomplete="off" class="layui-input">
                                </div>
                                <div class="layui-input-inline">
                                    <input type="text" name="mchId" id="mchId" placeholder="商户ID" autocomplete="off" class="layui-input">
                                </div>
                                <div class="layui-input-inline">
                                    <select name="accountType" id="accountType" lay-search="">
                                        <option value="-99">账号类型</option>
                                        <option value="1">银行账号</option>
                                        <option value="2">支付宝账号</option>
                                        <option value="3">微信账号</option>

                                    </select>
                                </div>
                                <button id="search" class="layui-btn" data-type="reload">搜索</button>
                            </div>
                        </div>
                    </div>
                </div>
                <table id="bankList" lay-filter="bankList"></table>
            </div>
        </div>
    </div>
</div>

<script type="text/html" id="payBar">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">详情</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">修改</a>
</script>

<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.js"></script>
<script>

    layui.use(['admin','table','util','admin','form'], function(){
        var table = layui.table
        ,$ = layui.$
        ,form = layui.form
        ,admin = layui.admin
            ,view =layui.view
            ,layer =layui.layer
        ,element = layui.element;

        element.render('breadcrumb', 'breadcrumb');//渲染导航信息

        var tplAccountType = function(d){
            if(d.accountType == 1) {
                return "<div>银行账号</div>";
            } else if (d.accountType == 2) {
                return "<div>支付宝账号</div>";
            } else if (d.accountType == 3) {
                return "<div>微信账号</div>";
            }
        };

        table.render({
            elem: '#bankList'
            ,url: layui.setter.baseUrl + '/bank_account/list'
            ,where: {
                access_token: layui.data(layui.setter.tableName).access_token
            }
            ,id: 'tableReload'
            ,cols: [[
                {field:'id', title: '银行账号ID', sort: true }
                ,{field:'mchId', title: '商户ID' }
                ,{field:'name', title: '商户名称' }
                ,{field: 'accountType',title: '账号类型', templet: tplAccountType}
                ,{field: 'accountNo',title: '账号信息'}
                ,{field:'createTime',  title: '创建时间', templet: '<div>{{ layui.util.toDateString(d.createTime) }}</div>' }
                ,{field:'edit', title: '操作',toolbar: '#payBar' }
            ]]
            ,page: true
            ,skin: 'line'
        });

        table.on('tool(bankList)', function(obj){
            var data = obj.data;
            console.log(data)
            if(obj.event === 'detail'){

                var id =data.id;
                admin.req({
                    type: 'get',
                    url: layui.setter.baseUrl + '/bank_account/get',
                    data: {
                        id: id
                    },
                    success: function(res){
                        if(res.code == 0){
                            data=res.data;

                            admin.popup({
                                title: '银行详情'
                                , area: ['720px', '355px']
                                , id: 'LAY-popup-content-view'
                                , success: function (layero, index) {
                                    view(this.id).render('sett/bank/detail').done(function () {
                                        form.render(null, 'layuiadmin-app-form-list');

                                        var body =layer.getChildFrame('body',index);
                                        body.find('#email').val(data.email);
                                        form.val("layuiadmin-app-form-list",{

                                            "id":data.id,
                                            "mchId":data.mchId,
                                            "name":data.name,
                                            "accountNo":res.data.accountNo,
                                            "remark":data.remark,
                                            "isDefault":data.isDefault==1?"默认":"不是默认",
                                            "accountType":data.accountType==1?"银行账号":data.accountType==2?"支付宝账号":data.accountType==3?"微信账号":'发生错误'

                                        })

                                        $('#createTime').val( layui.util.toDateString(res.data.createTime));
                                        $('#updateTime').val( layui.util.toDateString(res.data.updateTime));
                                        form.render();
                                    });
                                }
                            });

                        }else {
                            layer.alert(res.msg,{
                                title: '请求成功，但是状态不对'
                            })
                        }
                    }
                })

            } else if(obj.event === 'edit'){
                var id =data.id;
               var  accountNo =data.accountNo;

                admin.req({
                    type: 'get',
                    url: layui.setter.baseUrl + '/bank_account/get',
                    data: {
                        id: id,
                        accountNo: accountNo
                    },
                    error: function(err){
                        layer.alert(err);
                    },
                    success: function(res){
                        if(res.code == 0 ){

                            admin.popup({
                                title: '修改银行账号'
                                , area: ['540px', '325px']
                                , id: 'LAY-popup-content-view'
                                , success: function (layero, index) {
                                    view(this.id).render('sett/bank/update').done(function () {
                                        form.render(null, 'layuiadmin-app-form-list');

                                        var body =layer.getChildFrame('body',index);
                                        body.find('#email').val(data.email);
                                        form.val("layuiadmin-app-form-list",{

                                            "id":data.id

                                        })
                                        if(res.data.accountType == 1){
                                            $('.bankC').prop('checked',true);

                                            $('.alipay').prop('disabled',true);
                                            $('.wxpay').prop('disabled',true);
                                        }else if(res.data.accountType == 2){
                                            $('.alipay').prop('checked',true);

                                            $('.bankC').prop('disabled',true);
                                            $('.wxpay').prop('disabled',true);

                                        }else if(res.data.accountType == 3){
                                            $('.wxpay').prop('checked',true);

                                            $('.alipay').prop('disabled',true);
                                            $('.bankC').prop('disabled',true);
                                        }
                                        $('.accInfo').val(res.data.accountNo);
                                        $('.remarkInfo').val(res.data.remark);

                                        form.render();

                                        form.on('submit(btnUP)', function(data){
                                            // 在这个回调函数里面写ajax提交
                                            admin.req({
                                                type: 'POST',
                                                url: layui.setter.baseUrl + '/bank_account/update',
                                                data: data.field,
                                                success: function(res){
                                                    if(res.code == 0){
                                                        layer.alert(res.msg,{title: "保存成功"},function(index){
                                                            table.reload('tableReload');
                                                            layer.closeAll();
                                                        })
                                                    }else {
                                                        layer.alert(res.msg,{title: '保存失败'})
                                                    }
                                                }
                                            })
                                            return false;//阻止跳转
                                        });
                                    });
                                }
                            });

                        }else {
                            layer.alert(res.msg,{title: '请求失败'})
                        }
                        form.render();
                    }

                })

            }
        });



        // 搜索
        var $ = layui.$, active = {
            reload: function(){
                var id = $('#id').val();
                var mchId = $("#mchId").val();
                var accountType = $("#accountType").val();
                //执行重载
                table.reload('tableReload', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    ,where: {
                        id: id,
                        mchId : mchId,
                        accountType : accountType
                    }
                });
            }
        };
        $('#search').on('click', function() {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });


        // 渲染表单
        form.render();








        
    })

    
</script>